import React from 'react'
import { useState, useEffect } from 'react'
import { Col, Row, Input, Button, Modal, Form } from 'antd'
const SearchForm = (props) => {
  const { initialValues, isShow } = props
  useEffect(() => {
    console.log(initialValues, isShow)
    form.setFieldsValue(initialValues)
    setIsModalOpen(isShow)
  }, [initialValues, isShow])
  const [searStr, setSearStr] = useState('')
  const [isModalOpen, setIsModalOpen] = useState(isShow)
  const [form] = Form.useForm()
  const showModal = () => {
    setIsModalOpen(true)
    form.resetFields()
  }

  const handleCancel = () => {
    setIsModalOpen(false)
    form.resetFields()
  }
  const onFinish = async () => {
    // form.getFieldsValue()
    try {
      form.validateFields()
      console.log('Success:', form.getFieldValue())
      // setIsModalOpen(false)
      // form.resetFields()
    } catch (err) {
      console.log(err)
    }
  }

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  }
  //查询按钮点击事件
  const getList = () => {
    console.log(searStr)
  }
  return (
    <>
      <Row gutter={20}>
        <Col span={8}>
          <Input
            allowClear
            placeholder="请输入用户名"
            value={searStr}
            onChange={(e) => {
              setSearStr(e.target.value)
            }}
          />
        </Col>
        <Col span={14}>
          <Button type="primary" onClick={getList}>
            查 询
          </Button>
        </Col>
        <Col span={2}>
          <Button type="primary" onClick={showModal}>
            新 增
          </Button>
        </Col>
      </Row>
      <Modal
        title="新增用户"
        open={isModalOpen}
        onOk={onFinish}
        onCancel={handleCancel}>
        <Form
          {...layout}
          form={form}
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 600,
          }}
          autoComplete="off">
          <Form.Item
            label="姓名"
            name="name"
            validateTrigger="onBlur"
            rules={[
              {
                required: true,
                message: 'Please input your name!',
              },
            ]}>
            <Input />
          </Form.Item>

          <Form.Item
            label="年龄"
            name="age"
            validateTrigger="onBlur"
            rules={[
              {
                required: true,
                message: 'Please input your age!',
              },
            ]}>
            <Input />
          </Form.Item>
          <Form.Item
            label="地址"
            validateTrigger="onBlur"
            name="address"
            rules={[
              {
                required: true,
                message: 'Please input your address!',
              },
            ]}>
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}
export default SearchForm
